<template>
  <div class="content">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
    <button @click="handleClick">点击测试</button>
  </div>
</template>

<script setup>
// Vue 3.2.13 支持 defineProps 直接定义类型
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  }
})

// 直接使用 props 中的属性，保持响应式
const handleClick = () => {
  alert(`标题：${props.title}\n描述：${props.description}`)
}
</script>

<style>
.content {
  padding: 10px;
  flex: 1;
  width: 800px;
  height: 500px;
  
}
button {
  background-color: #42b983;
  color: white;
 
  border-style:  double;
  padding: 30px 80px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #359e6b;
}
</style>
